<!--
 * @Author: yao
 * @Date: 2024-11-19 16:48:33
 * @LastEditTime: 2024-11-19 19:06:54
 * @LastEditors: yao
 * @Description: 
 * @FilePath: \jdev-web\src\Layouts\SubMenu.vue
-->
<template>
  <div class="">
    <!-- <div class="sub_menu" @click="clickSubMenu(sub)"
      :class="{ 'sub_menu_select': menu.meta.id === currentSubMenu.meta?.id }" v-for="menu in menuData" :key="menu.id">
      <div v-if="menu.children && menu.children.length > 0">
        {{ menu.meta.title }}
      </div>
      <div v-else>
        {{ menu.meta.title }}
      </div>
    </div> -->
    <PanelMenu :pt="{ panel: '!border-none' }" :model="getMenus">
      <template #item="{ item, active }">
        <router-link v-if="item.route" v-slot="{ href, navigate }" :to="item.route" custom>
          <a v-ripple class="flex items-center cursor-pointer text-surface-700 dark:text-surface-0 px-4 py-2"
            :href="href" @click="navigate">
            <span :class="item.icon" />
            <span class="ml-2">{{ item.label }}</span>
          </a>
        </router-link>
        <a v-else v-ripple class="flex items-center cursor-pointer text-surface-700 dark:text-surface-0 px-4 py-2"
          :href="item.url" :target="item.target">
          <span :class="item.icon" />
          <span class="ml-2">{{ item.label }}</span>
          <span v-if="item.items && active" class="pi pi-angle-down text-primary ml-auto" />
          <span v-if="item.items && !active" class="pi pi-angle-up text-primary ml-auto" />
        </a>
      </template>
    </PanelMenu>
  </div>
</template>
<script setup lang='ts'>
import { ref, reactive, computed } from 'vue'

const props = defineProps({
  menuData: {
    type: Array,
    required: true,
    default: () => []
  },
  isChild: {
    type: Boolean,
    default: false
  },
  pId: {
    type: Number,
    required: false,
    default: 0
  }
})

const currentSubMenu = ref({})
const reformData = (data: any) => {
  let res = []
  for (let item of data) {
    let obj: any = {
      label: item.meta.title,
      path: item.path,
      name: item.name
    }
    if (item.children && item.children.length > 0) {
      obj.items = reformData(item.children)
    }
    res.push(obj)
  }
  return res
}

const getMenus = computed(() => {

  return reformData(props.menuData)
})
const clickSubMenu = (menu) => {
  currentSubMenu.value = menu
}
</script>
<style scoped lang='scss'></style>